
<template>
  <div ref="fullscreenElement">
    <Modelheader
      @clearData="clearData"
      @autotypeDate="autotypeDate"
      :examStatus="examStatus"
    ></Modelheader>
    <div>
      <div class="cropperBox">
        <div
          class="cropperImageset"
          id="your-scrollable-div"
          @mousedown="startDrag"
          @mousemove="onDrag"
          @mouseup="stopDrag"
          @mouseleave="stopDrag"
          :style="{
            cursor: isDragging ? 'grabbing !important' : 'grab !important',
          }"
        >
          <ImageSelector
            ref="childComponent"
            @isDrawingChange="isDrawingChange"
            :scale="scale"
            :startX="startX"
            :startY="startY"
            :offsetX="offsetX"
            :offsetY="offsetY"
            :isDragging="isDragging"
            :style="{
              transform: `translate(${offsetX}px, ${offsetY}px) scale(${
                scale / 100
              })`,
            }"
            @newRectangle="newRectangle"
            :drawStatus="drawStatus"
            :pagevale="pagevale"
            :imageUrllist="modelenews"
            @modeltype="modeltype"
            :modelarealistcavans="modelarealistcavans"
            @refreshdata="refreshdata"
            @editContent="editContent"
            @objbasicparameters="objbasicparameters"
          />
          <div class="templatePage">
            <div
              v-for="(item, index) in modelenews"
              :key="index"
              :class="pagevale - 1 == index ? 'hover imgbox' : 'imgbox'"
              @click="changeImage(index)"
            >
              {{ index + 1 }}
            </div>
          </div>
          <div class="templatePage1" style="width: 350px">
            <!-- 进度条缩放 -->
            <el-slider
              v-model="scale"
              :min="1"
              :max="100"
              show-input
              style="width: 100%"
            >
            </el-slider>
          </div>
          <div
            v-if="selectquestionitem"
            :style="{
              width: selectquestionitem.width + 'px',
              height: selectquestionitem.height + 'px',
              background: 'rgba(255,0,0,0.4)',
              position: 'absolute',
              left: selectquestionitem.x + 'px',
              top: selectquestionitem.y + 'px',
              zIndex: 1000,
            }"
          ></div>
        </div>
        <div class="uploadcardInfo">
          <h3>主观题</h3>
          <div class="kgtboxscorll">
            <div
              class="examnumbercontent"
              v-for="(item, index) in subjectlistdata"
              :key="index"
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                "
                class="spacebettweenlist"
              >
                <b v-if="item.smallquestion && item.smallquestion.length > 0">
                  {{ item.questionTypeName }}{{ item.questionNumber }}*
                  满分*：{{ item.fullScore }}分
                  <i :class="{ hover: item.kxstatus }"
                    >（{{ item.kxstatus == true ? "已框选" : "未框选" }}）</i
                  >
                </b>
                <b v-else>
                  {{ item.questionTypeName }}{{ item.questionNumber }}*
                  满分*：{{ item.fullScore }}分
                  <i :class="{ hover: item.kxstatus }"
                    >（{{ item.kxstatus == true ? "已框选" : "未框选" }}）</i
                  >
                </b>
                <div>
                  <!-- <em>编辑</em> -->
                  <span
                    @click.stop="subjectDelete(item.id)"
                    v-if="examStatus == 0"
                    >删除</span
                  >
                </div>
              </div>
              <template>
                <template
                  v-if="item.smallquestion && item.smallquestion.length > 0"
                >
                  <div v-for="(child, num) in item.smallquestion" :key="num">
                    <b style="padding-top: 15px"
                      >({{ num + 1 }})满分*：{{ child.fullScore }}</b
                    >
                    <template
                      v-if="
                        child.examTemplateFieldList &&
                        child.examTemplateFieldList.length > 0
                      "
                    >
                      <div
                        style="
                          display: flex;
                          align-items: center;
                          flex-wrap: wrap;
                        "
                      >
                        <div
                          class="nameexamnum"
                          style="margin-right: 0; padding-right: 0"
                          v-for="(
                            clit, clitindex
                          ) in child.examTemplateFieldList"
                          :key="clitindex"
                        >
                          <div>
                            <em
                              :class="
                                selectquestionitem &&
                                selectquestionitem.id == clit.id
                                  ? 'boxred'
                                  : ''
                              "
                              style="margin-right: 0"
                              @click.stop="
                                subjectclitepic(
                                  item.questionNumber,
                                  clit,
                                  7,
                                  clitindex
                                )
                              "
                              >切图{{ clitindex + 1 }}</em
                            >
                          </div>
                        </div>
                        <i
                          v-if="examStatus == 0"
                          class="el-icon-circle-plus"
                          style="
                            color: #1a48db;
                            display: inline-block;
                            margin-left: 15px;
                            cursor: pointer;
                            margin-top: 10px;
                          "
                          @click="addsujectqt1(index, child, 7, num)"
                        ></i>
                      </div>
                    </template>
                    <div
                      v-else
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: left;
                        flex-wrap: wrap;
                      "
                    >
                      <div class="nameexamnum">
                        <div>
                          <em
                            :class="
                              selectquestionitem &&
                              selectquestionitem.id == child.id
                                ? 'boxred'
                                : ''
                            "
                            @click.stop="
                              subjectclitepic(item.questionNumber, child, 7)
                            "
                            >切图1</em
                          >
                        </div>
                      </div>
                      <template v-if="examStatus == 0">
                        <i
                          v-if="
                            child.examTemplateFieldList &&
                            child.examTemplateFieldList.length > 0
                          "
                          class="el-icon-circle-plus"
                          style="
                            color: #1a48db;
                            display: inline-block;
                            margin-left: 15px;
                            cursor: pointer;
                            margin-top: 10px;
                          "
                          @click="addsujectqt1(index, child, 7, num)"
                        ></i>
                      </template>
                    </div>
                  </div>
                </template>
                <div v-else>
                  <template
                    v-if="
                      item.examTemplateFieldList &&
                      item.examTemplateFieldList.length > 0
                    "
                  >
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: left;
                        flex-wrap: wrap;
                      "
                    >
                      <div
                        class="nameexamnum"
                        style="margin-right: 0; padding-right: 0"
                        v-for="(clit, clitindex) in item.examTemplateFieldList"
                        :key="clitindex"
                      >
                        <div>
                          <em
                            :class="
                              selectquestionitem &&
                              selectquestionitem.id == clit.id
                                ? 'boxred'
                                : ''
                            "
                            @click.stop="
                              subjectclitepic(
                                item.questionNumber,
                                clit,
                                7,
                                clitindex
                              )
                            "
                            style="margin-right: 0"
                            >切图{{ clitindex + 1 }}</em
                          >
                        </div>
                      </div>
                      <i
                        class="el-icon-circle-plus"
                        v-if="examStatus == 0"
                        style="
                          color: #1a48db;
                          display: inline-block;
                          margin-left: 15px;
                          cursor: pointer;
                          margin-top: 10px;
                        "
                        @click="addsujectqt(index, item, 7)"
                      ></i>
                    </div>
                  </template>
                  <div
                    v-else
                    style="display: flex; align-items: center; flex-wrap: wrap"
                  >
                    <div
                      class="nameexamnum"
                      style="margin-right: 0; padding-right: 0"
                    >
                      <div>
                        <em
                          :class="{
                            boxred:
                              selectquestionitem &&
                              selectquestionitem.id == item.id,
                          }"
                          @click="subjectiveTap(item, 7, index)"
                          style="margin-right: 0"
                          >切图1</em
                        >
                      </div>
                    </div>
                    <template v-if="examStatus == 0">
                      <i
                        v-if="
                          item.examTemplateFieldList &&
                          item.examTemplateFieldList.length > 0
                        "
                        class="el-icon-circle-plus"
                        style="
                          color: #1a48db;
                          display: inline-block;
                          margin-left: 15px;
                          cursor: pointer;
                          margin-top: 10px;
                        "
                        @click="addsujectqt(index, item, 7)"
                      ></i>
                    </template>
                  </div>
                  <!-- <div class="nameexamnum">
											<div>
												<em>切图1</em>
											</div>
										</div> -->
                </div>
              </template>
            </div>
          </div>
          <div class="xinzeplxtbutton" v-if="examStatus == 0">
            <span @click="batchaddsubject">批量新增主观题</span>
            <span @click="batcheditsubject">批量编辑主观题</span>
          </div>
        </div>
      </div>
    </div>
    <Batchaddsubjective
      v-if="subjectiveishow"
      @closesubjective="closesubjective"
      :pagevale="pagevale"
      :editsubjectchilddate="editsubjectchilddate"
    ></Batchaddsubjective>
    <Editsubject
      @updateObjectivelistdata="updateObjectivelistdata"
      v-if="editsubjectishow"
      :editKmVisible="editsubjectishow"
      :editsubjectchilddate="editsubjectchilddate"
      @updateobjectivequestionssurebc="updateobjectivequestionssurebc"
    ></Editsubject>
  </div>
</template>

<script>
import ImageSelector from "../../components/model/positioningarea.vue"; //切图
import Modelheader from "../../components/model/modelhead.vue";
import {
  templateIdinfo,
  getsubjectivelist,
  batchdeletesubject,
  basicinfoCanvasimg,
  bascInfodelete,
} from "../../api/paperinfo/paperinfo.js";
import Batchaddsubjective from "../../components/model/batchaddsubjective.vue";
import Editsubject from "../../components/model/editsubjective.vue";
export default {
  name: "App",
  data() {
    return {
      scale: 100,
      isDragging: false,
      noFragging: false,
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0,
      isDrawing: false,

      navbar: [
        {
          name: "模板信息及上传",
          id: 0,
        },
        {
          name: "水平定位",
          id: 1,
        },
        {
          name: "定位区",
          id: 2,
        },
        {
          name: "准考证号区",
          id: 3,
        },
        {
          name: "客观题区",
          id: 4,
        },
        {
          name: "主观题区",
          id: 5,
        },
      ],
      // optionArea:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
      optionArea: ["A", "B", "C", "D"],
      tabnavindex: 0,
      examclassify: "",
      examclassifylist: ["条形码", "涂点", "手写"],
      examNumber: "",
      examNumberlist: [
        4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
      ],
      cardNumber: 2,
      cardNumberlist: [2, 4, 6],
      cardColor: "",
      cardColorlist: ["黑色", "灰色", "彩色"],
      examdpi: "",
      examdpilist: [150, 200, 300],
      images: [],
      questiontype: "",
      questionList: [
        {
          name: "定位点",
          id: 1,
        },
        {
          name: "文字定位",
          id: 2,
        },
      ],
      selectradio: 1,
      fillinWidth: 0,
      fillinHeight: 0,
      intervalWidth: 0,
      intervalHeight: 0,
      modelobj: {
        id: 0,
        examTemplateId: 0,
        examCourseId: 0,
        examNoLength: 4,
        answerCardPages: 2,
        status: 0,
        templateImages: [],
      },
      moduleImageurl: {},
      templateId: "", //模板id
      examCourseId: "", //考试科目id
      modeldata: {
        templateId: 0,
        examCourseId: 0,
        templateAreaType: 1,
      },
      positioningare: {
        id: 0,
        templateId: 0,
        templateAreaType: 0,
        templateCuttingRegion: [],
      },
      modeltypequestion: [],
      modelarealist: [],
      modelarealistcavans: [],
      examInfo: {},
      editmodelishow: false,
      pagevale: 1,
      modelenews: [],
      examName: "",
      telemplatelist: [],
      isFullscreen: false, // 当前是否处于全屏状态
      activeName: "1",
      subjectiveishow: false,
      editsubjectishow: false,
      subjectlistdata: [],
      editsubjectchilddate: [],
      positionActiveishow: false,
      selectquestionitem: {},
      clittype: "",
      clitname: "",
      drawStatus: false,
      questionId: "",
      sort: 0,
      examStatus: "",
      loadingishow: false,
    };
  },
  mounted() {
    // 监听全屏状态变化
    //   document.onfullscreenchange = this.handleFullscreenChange;
    setTimeout(() => {
      this.modeltab();
    }, 1000);
    // this.initDrag()
    this.getsubjectivelisttap();
  },
  methods: {
    addsujectqt1(parentindex, con, type, index) {
      console.info("dddddcon", index);
      console.info("pindex", parentindex);
      // 创建 obj
      let obj = {
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        sort:
          con.examTemplateFieldList && con.examTemplateFieldList.length
            ? con.examTemplateFieldList.length
            : 0,
        id: 0,
        page: this.pagevale,
        questionId: con.id,
        fieldName: ` ${con.questionTypeName ? con.questionTypeName : ""}${
          con.questionNumber
            ? con.questionNumber
            : con.parentQuestionNumber
            ? con.parentQuestionNumber
            : ""
        }`,
        fieldType: type,
      };

      // 现在可以安全地 push
      this.subjectlistdata[parentindex].smallquestion[
        index
      ].examTemplateFieldList.push(obj);
      this.$set(this.subjectlistdata[parentindex], "kxstatus", false);

    },
    addsujectqt(parentindex, con, type, index) {
      console.info("dddddcon", index);
      console.info("pindex", parentindex);
      let obj = {};
      if (
        con.examTemplateFieldList ||
        con.examTemplateFieldList == null ||
        con.examTemplateFieldList.length == 0
      ) {
        obj = {
          x: 0,
          y: 0,
          width: 0,
          height: 0,
          sort:
            con.examTemplateFieldList || con.examTemplateFieldList != null
              ? con.examTemplateFieldList.length
              : 0,
          id: 0,
          page: this.pagevale,
          questionId: con.id,
          fieldName: `${con.questionTypeName ? con.questionTypeName : ""}${
            con.questionNumber
          }`,
        };
        (this.sort =
          con.examTemplateFieldList || con.examTemplateFieldList != null
            ? con.examTemplateFieldList.length
            : 0),
          (this.questionId = con.id);
      } else {
        obj = con.examTemplateFieldList[0];
        obj.x = 0;
        obj.y = 0;
        obj.width = 0;
        obj.height = 0;
        obj.sort = con.examTemplateFieldList.length;
        obj.id = 0;
        obj.sort = con.examTemplateFieldList.length;
        this.sort = con.examTemplateFieldList.length;
        this.questionId = obj.questionId;
      }
      this.subjectlistdata[parentindex].examTemplateFieldList.push(obj);
      this.$set(this.subjectlistdata[parentindex], "kxstatus", false);
    },
    subjectiveTap(con, type) {
      if (this.examStatus == 1) {
        return false;
      }
      console.info("this.selectquestionitem", this.selectquestionitem);
      this.selectquestionitem =
        con.examTemplateFieldList && con.examTemplateFieldList.length > 0
          ? con.examTemplateFieldList[0]
          : null;
      const scrollableDiv = document.getElementById("your-scrollable-div");
      // 直接设置滚动位置
      scrollableDiv.scrollLeft = this.selectquestionitem
        ? this.selectquestionitem.x
        : 0; // 水平滚动
      scrollableDiv.scrollTop = this.selectquestionitem
        ? this.selectquestionitem.y
        : 0; // 垂直滚动

      this.drawStatus = true;
      this.clittype = type;
      this.clitname = `${con.questionTypeName ? con.questionTypeName : ""}${
        con.questionNumber ? con.questionNumber : ""
      }`;
      this.questionId = con.id;
      if (con.x !== 0 && con.y !== 0 && con.width !== 0 && con.height !== 0) {
        if (this.pagevale != con.examTemplateFieldList[0].page) {
          this.getsubjectivelisttap();
        }
        this.pagevale = con.examTemplateFieldList[0].page;
      }
    },
    subjectclitepic(num, content, type) {
      console.info(content,'sdfasdfasdfasdfasd')
      if (this.examStatus == 1) {
        return false;
      }
      if (content.width && content.height && content.x && content.y) {
          this.selectquestionitem = content;
      }
      this.drawStatus = true;
      this.clittype = type;
      // this.clitname = `${content.questionTypeName?content.questionTypeName:''}${content.questionNumber?content.questionNumber:content.parentQuestionNumber?content.parentQuestionNumber:''}${content.sort?'-':''}${content.sort?content.sort:''}`
      this.clitname = `${
        content.questionTypeName
          ? content.questionTypeName
          : content.fieldName
          ? content.fieldName
          : ""
      }${
        content.smallQuestionNumber
          ? content.smallQuestionNumber
          : content.parentQuestionNumber
          ? content.parentQuestionNumber
          : ""
      }${content.sort ? "-" : ""}${content.sort ? content.sort : ""}`;
      this.questionId = content.id != 0 ? content.id : content.questionId;

      if (
        content.x != 0 &&
        content.y != 0 &&
        content.width != 0 &&
        content.height != 0
      ) {
        if (this.pagevale != content.page) {
          this.getsubjectivelisttap();
        }
        this.pagevale = content.page;
      }
      const scrollableDiv = document.getElementById("your-scrollable-div");
      // 直接设置滚动位置
      scrollableDiv.scrollLeft = content.x; // 水平滚动
      scrollableDiv.scrollTop = content.y; // 垂直滚动
      // 平滑滚动（兼容现代浏览器）
      scrollableDiv.scrollTo({
        left: x,
        top: y,
        behavior: "smooth",
      });
    },
    //切图坐标点
    newRectangle(val) {
      // console.info('this.questionId',this.questionId)
      // console.info('this.fieldName',this.fieldName)
      console.info("this.sort", this.sort);
      let option = {
        templateId: this.$route.query.templateId,
        page: this.pagevale,
        fieldType: this.clittype,
        fieldName: this.clitname,
        x: val.x,
        y: val.y,
        width: val.width,
        height: val.height,
        sort: parseInt(this.sort + 1),
        questionId: this.questionId,
      };
      // console.info('option',option)
      // return false
      basicinfoCanvasimg(option).then((res) => {
        if (res.code == 200) {
          this.getsubjectivelisttap();
          this.drawStatus = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    subjectDelete(id) {
      console.info(id,'主题干id')
      console.info(this.selectquestionitem,'小题干删除')
      if (this.selectquestionitem?.id != null) {
        console.info(id,'dddsdsfsdfsdfsdfsddfsdfsdf')
        this.deletesmallsubject(this.selectquestionitem.id);
      } else {
        this.deleteModel(id);
      }
    },
    //删除主干
    deleteModel(id) {
      console.info(id,'主题干')
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          batchdeletesubject([id]).then((res) => {
            if (res.code == 200) {
              this.selectquestionitem = {};
              this.getsubjectivelisttap();
              this.selectquestionitem = false;
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除小题
    deletesmallsubject(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          bascInfodelete(id).then((res) => {
            if (res.code == 200) {
              this.selectquestionitem = {};
              this.getsubjectivelisttap();
              this.selectquestionitem = false;
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    updateobjectivequestionssurebc(data) {
      this.editsubjectishow = false;
      this.selectquestionitem = {};
      this.selectquestionitem = false;
      if (data == 1) {
        //走一遍获取客观题接口
        this.getsubjectivelisttap();
      }
    },
    //批量编辑
    batcheditsubject() {
      this.editsubjectishow = true;
      this.selectquestionitem = {};
      this.selectquestionitem = false;
    },
    nestQuestions(data) {
      // First find all parent questions (parentQuestionNumber === 0)
      const parents = data.filter((item) => item.parentQuestionNumber === 0);

      // Then for each parent, find its children
      return parents.map((parent) => {
        // 如果questionNumber和parentQuestionNumber都为0，直接返回
        if (parent.questionNumber === 0 && parent.parentQuestionNumber === 0) {
          parent.smallquestion = [];
          return parent;
        }

        // 否则正常处理嵌套逻辑
        parent.smallquestion = [];
        // Find all questions where parentQuestionNumber matches this parent's questionNumber
        const children = data.filter(
          (item) => item.parentQuestionNumber === parent.questionNumber
        );
        console.info("examTemplateFieldList", children);
        // If there are children, add them to a smallquestion array
        if (children.length > 0) {
          return {
            ...parent,
            smallquestion: children.sort(
              (a, b) => a.smallQuestionNumber - b.smallQuestionNumber
            ),
          };
        }
        console.info(parent, "parent");
        // If no children, return the parent as-is
        return parent;
      });
    },
    getsubjectivelisttap() {
      this.loadingishow = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let params = {
        examTemplateId: this.$route.query.templateId,
      };
      getsubjectivelist(params)
        .then((res) => {
          if (res.code == 200) {
            this.editsubjectchilddate = res.data.map((item) => {
              // 如果 examTemplateFieldList 存在且有元素，则处理它
              if (
                item.examTemplateFieldList &&
                item.examTemplateFieldList.length > 0 &&
                item.examTemplateFieldList != null
              ) {
                return {
                  ...item, // 保留原item的所有属性
                  kxstatus: item.examTemplateFieldList.some(
                    (kx) =>
                      kx.height > 0 && kx.width > 0 && kx.x > 0 && kx.y > 0
                  ),
                };
              }
              // 如果没有examTemplateFieldList，直接返回原item
              return item;
            });
            this.subjectlistdata = this.nestQuestions(res.data).map((item) => {
              // if(item.smallquestion.length>0){
              // 		item.smallquestion.map(small=>{
              // 			return {// 保留原item的所有属性
              // 				...small,
              // 				kxstatus11: small.examTemplateFieldList.some(kx =>
              // 					kx.height > 0 && kx.width > 0 && kx.x > 0 && kx.y > 0
              // 				)
              // 		};
              // 	})
              // 	console.info('item.smallquestion',item.smallquestion)
              // }
              if (
                Array.isArray(item.smallquestion) &&
                item.smallquestion.length > 0
              ) {
                item.smallquestion = item.smallquestion.map((small) => {
                  const hasValidPosition =
                    Array.isArray(small.examTemplateFieldList) &&
                    small.examTemplateFieldList.some(
                      (kx) =>
                        kx &&
                        Number(kx.height) > 0 &&
                        Number(kx.width) > 0 &&
                        Number(kx.x) > 0 &&
                        Number(kx.y) > 0
                    );

                  return {
                    ...small,
                    kxstatus: hasValidPosition,
                  };
                });
                item.kxstatus = item.smallquestion.some(
                  (small) => small.hasOwnProperty("kxstatus") && small.kxstatus
                );
                console.info(item.kxstatus);
                // console.info('处理后的小题数据:', item.smallquestion);
              }
              if (
                item.examTemplateFieldList &&
                item.examTemplateFieldList.length > 0 &&
                item.examTemplateFieldList != null
              ) {
                return {
                  ...item, // 保留原item的所有属性
                  kxstatus: item.examTemplateFieldList.some(
                    (kx) =>
                      kx.height > 0 && kx.width > 0 && kx.x > 0 && kx.y > 0
                  ),
                };
              } else {
                return {
                  ...item,
                  // kxstatus:false
                };
              }
            });
            console.info(this.subjectlistdata, "this.subjectlistdata");
            const result = res.data
              .filter((parent) => parent !== null) // First remove all null entries
              .flatMap((parent) => {
                console.info("parent", parent);
                const fieldList = parent.examTemplateFieldList || []; // Handle null/undefined examTemplateFieldList
                return fieldList.length > 0
                  ? fieldList.map((child) => ({
                      ...child,
                      questionNumber: parent.questionNumber,
                      questionTypeName: parent.questionTypeName,
                    }))
                  : []; // Return empty array if no children
              });
            console.info("result", result);
            this.modelarealistcavans = result
              .filter((item) => item.page == this.pagevale)
              .map((item) => ({
                ...item,
                templatePointType: `${
                  item.fieldName ? item.fieldName : item.questionNumber
                }`,
              }));
            this.loadingishow.close();
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .finally(() => {
          this.loadingishow.close();
        });
    },
    batchaddsubject() {
      this.subjectiveishow = true;
      this.selectquestionitem = {};
      this.selectquestionitem = false;
    },
    closesubjective(data) {
      this.subjectiveishow = false;
      this.selectquestionitem = {};
      if (data == 1) {
        //走一遍获取客观题接口
        this.getsubjectivelisttap();
      }
    },
    changeImage(index) {
      this.pagevale = index + 1;
      this.getsubjectivelisttap();
      this.selectquestionitem = false;
    },
    // 获取模板
    modeltab() {
      this.loadingishow = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let obj = {
        templateId: this.$route.query.templateId,
      };
      templateIdinfo(obj).then((res) => {
        console.info(res);
        if (res.code == 200) {
          this.modelenews = res.data;
          this.examStatus = res.data && res.data[0].editStatus;
          this.loadingishow.close();
        }
      });
    },
    clearData() {
      this.getsubjectivelisttap();
    },
    autotypeDate() {
      this.getsubjectivelisttap();
    },
    quiteclick() {
      this.$router.push("/examoverview");
    },
    editContent(data) {
      this.editmodelishow = data.ishow;
      this.questiontype = data.templatePointType;
      this.positioningare.templateCuttingRegion = [
        {
          id: data.id,
          templateId:
            this.modelobj.templateImages[this.pagevale - 1].templateId, // 如果有具体的 templateId 值，可以在这里赋值
          templatePointType: this.qiehuanzhiquestiontype, // 如果有具体的 templatePointType 值，可以在这里赋值
          page: this.pagevale,
          width: data.w,
          height: data.h,
          x: data.x,
          y: data.y,
        },
      ];
    },
    questionchange(data) {
      // this.qiehuanzhiquestiontype = data
      this.positioningare.templateCuttingRegion[0].templatePointType = data;
    },
    canceleditbox() {
      this.editishow = false;
      this.editmodelishow = false;
    },
    objbasicparameters() {
      this.editishow = false;
      this.editmodelishow = false;
    },
    refreshdata() {
      this.modeltab();
    },
    modeltype(data) {
      this.modeltypequestion.push(data);
    },
    pagevalueindex(val) {
      this.pagevale = val;
      this.modelinfo(this.templateId);
    },
    // 切换全屏
    toggleFullscreen() {
      if (!document.fullscreenEnabled) {
        alert("您的浏览器不支持全屏功能！");
        return;
      }

      if (this.isFullscreen) {
        // 退出全屏
        document.exitFullscreen();
        this.$refs.fullscreenElement.style.overflow = "auto";
      } else {
        // 进入全屏
        this.$refs.fullscreenElement.requestFullscreen();
        this.$refs.fullscreenElement.style.overflow = "auto";
      }
    },
    // 处理全屏状态变化
    handleFullscreenChange() {
      this.isFullscreen = !!document.fullscreenElement;
    },

    // 拖拽
    startDrag(e) {
      if (!this.noFragging && !this.isDrawing) {
        this.isDragging = true;
        this.startX = e.clientX - this.offsetX;
        this.startY = e.clientY - this.offsetY;
      }
    },
    onDrag(e) {
      if (!this.noFragging && !this.isDrawing) {
        if (!this.isDragging) return;
        this.offsetX = e.clientX - this.startX;
        this.offsetY = e.clientY - this.startY;
      }
    },
    stopDrag() {
      if (!this.noFragging && !this.isDrawing) {
        this.isDragging = false;
      }
    },
    isDrawingChange(e) {
      console.log(e, "修改了isDrawing");

      this.isDrawing = e;
    },

    updateObjectivelistdata(data) {
      this.editsubjectchilddate = data;
    },
  },
  components: {
    ImageSelector,
    Modelheader,
    Batchaddsubjective,
    Editsubject,
  },
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
.header {
  padding: 0 40px;
  height: 48px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  background: #2379f6;
  font-size: 16px;
}
.header h3 {
  font-weight: normal;
  font-size: 16px;
}
.header p {
  display: flex;
}
.header p b {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 134px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  border: 1px solid #ffffff;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  margin-right: 14px;
}
.header p b img {
  width: 16px;
  margin-right: 8px;
}
.header p em {
  display: inline-block;
  width: 76px;
  height: 32px;
  background: #ffffff;
  border-radius: 17px;
  border: 1px solid #ffffff;
  color: #2379f6;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}
.tabNav {
  padding: 0 40px;
  height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px 0 10px;
  background: #fff;
}
.tabNav ul {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.tabNav ul li {
  padding: 0 20px;
  cursor: pointer;
  line-height: 38px;
  color: #557292;
  position: relative;
}
.tabNav ul li:hover,
.tabNav ul li.hover {
  color: #2a303b;
}
.tabNav ul li:hover::after,
.tabNav ul li.hover::after {
  content: "";
  width: 24px;
  height: 4px;
  background: #295cff;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.tabNav span {
  display: inline-block;
  width: 140px;
  height: 34px;
  background: #f2f6fb;
  border-radius: 10px;
  border: 1px solid #295cff;
  font-weight: 500;
  font-size: 14px;
  color: #295cff;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}
/* 上传 */
.uploadMarks {
  box-sizing: border-box;
  background: #f4f7fd;
  width: 100vw;
  height: calc(100vh - 102px);
  position: relative;
}
.smcsbutton {
  width: 124px;
  height: 34px;
  background: #2379f6;
  border-radius: 10px;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  border: none;
  /* margin:24px 0 0 24px; */
  position: absolute;
  padding: 0;
  left: 24px;
  top: 24px;
}
.boxcenter {
  display: flex;
  justify-content: space-between;
}
.uploadcardInfo {
  width: 480px;
  height: calc(100vh - 102px);
  background: #fff;
  position: relative;
  box-shadow: 0 4px 16px 0 #5572921a;
  overflow-y: auto;
}
.examboxbutton {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 54px;
  background: #e8f0fa;
  position: absolute;
  left: 0;
  bottom: 0;
}
.examboxbutton >>> .el-button {
  width: 124px;
  height: 34px;
  border-radius: 10px;
  padding: 0;
  margin: 0;
  font-size: 12px;
  border: 1px solid #295cff;
  color: #295cff;
  background: none;
}
.examboxbutton >>> .el-button:first-child {
  background: #295cff;
  border: 1px solid #295cff;
  color: #fff;
}
.examboxbutton >>> .el-button:nth-child(2) {
  margin: 0 8px;
}
.examboxbutton1 {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 54px;
  background: #e8f0fa;
  position: absolute;
  left: 0;
  bottom: 0;
  justify-content: center;
}
.examboxbutton1 >>> .el-button {
  width: 124px;
  height: 34px;
  border-radius: 10px;
  padding: 0;
  margin: 0;
  font-size: 12px;
  border: 1px solid #295cff;
  color: #295cff;
  background: none;
}
.examboxbutton1 >>> .el-button:first-child {
  background: #295cff;
  border: 1px solid #295cff;
  color: #fff;
}
.examboxbutton1 >>> .el-button:nth-child(2) {
  margin: 0 8px;
}
.uploadcardInfo h3 {
  border-bottom: solid 1px #d8e4f0;
  padding: 18px 24px 14px;
  color: #2a303b;
  font-weight: normal;
  margin: 0;
}
.uploadCardimage {
  width: calc(100% - 460px);
  height: calc(100vh - 102px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.uploadCardimage span {
  display: block;
  width: 100%;
  text-align: center;
}
.uploaddiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.uploaddivattention {
  font-size: 14px;
  color: #b3b8c2;
}
.cropperBox {
  height: calc(100vh - 102px);
  display: flex;
}
.cropperImageset {
  width: calc(100% - 480px);
  height: calc(100vh - 102px);
  overflow: scroll;
  position: relative;
}
/* 纵向滚动条宽度 */
/* 纵向滚动条宽度 */
.cropperImageset::-webkit-scrollbar {
  width: 12px; /* 控制纵向滚动条的宽度 */
  height: 12px; /* 控制横向滚动条的高度 */
}

/* 横向滚动条高度 */
.cropperImageset::-webkit-scrollbar-thumb {
  height: 8px; /* 单独调整横向滚动条滑块高度 */
}

/* 滚动条轨道 */
.cropperImageset::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 滚动条滑块 */
.cropperImageset::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 6px;
}

/* 鼠标悬停时滑块样式 */
.cropperImageset::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}
#your-scrollable-div {
  width: calc(100% - 480px);
  height: calc(100vh - 102px);
  overflow: auto;
  position: relative;
}
.routate {
  position: absolute;
  left: 50px;
  top: 5px;
  background: #fff;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 10px 0 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  font-size: 14px;
  color: #557292;
  border-radius: 10px;
  z-index: 10;
}
.routate >>> .el-select,
.routate >>> .el-input {
  width: 150px;
}
.routate >>> .el-select {
  margin-right: 10px;
}
.routate >>> .el-input {
  margin-left: 10px;
  margin-right: 10px;
}
.routate >>> .el-button {
  border-radius: 10px;
  height: 35px;
  width: 55px;
  padding: 0;
  margin-left: 10px;
}
.routate >>> .el-input__inner {
  border-radius: 10px;
  height: 35px;
}
.image-preview img {
  box-sizing: border-box;
  width: 150px;
  height: 150px;
  background: #ffffff;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
  color: #295cff;
  cursor: pointer;
  margin: 22px;
}
.searchlist {
  box-sizing: border-box;
  width: auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  height: 54px;
  background: #ffffff;
  border-radius: 10px;
  padding: 0 24px;
  align-items: center;
}
.searchlist {
  padding-left: 20px;
  display: flex;
  align-items: center;
  justify-content: left;
}
.searchlist a {
  display: block;
  color: #557292;
  font-size: 14px;
  /* width:100px; */
  text-align: center;
  position: relative;
  line-height: 52px;
  padding: 0 15px;
}
.searchlist a:hover,
.searchlist a.hover {
  color: #295cff;
}
.searchlist a:hover::after,
.searchlist a.hover::after {
  content: "";
  width: 24px;
  height: 4px;
  background: #295cff;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.boxsetetid {
  display: flex;
  align-items: center;
}
.boxsetetid >>> .el-input__inner {
  width: 90px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #295cff;
  font-weight: 500;
  font-size: 14px;
  color: #295cff;
}
.boxsetetid >>> .el-select .el-input .el-select__caret {
  color: #295cff;
}
.boxsetetid >>> .el-input__icon {
  line-height: 34px;
}
.boxsetetid >>> .el-button {
  padding: 0;
  width: 96px;
  height: 34px;
  background: #295cff;
  border-radius: 10px;
  color: #fff;
  line-height: 34px;
  margin: 0 10px;
}
.breadBox >>> .el-breadcrumb__inner a,
.breadBox >>> .el-breadcrumb__inner.is-link {
  font-weight: normal;
}
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: bold;
}
.examnumberset {
  display: flex;
  align-items: center;
  padding: 0 0 0 20px;
}
.examnumberset li {
  width: 20px;
  height: 20px;
  border: 1px solid #295cff;
  border-radius: 2px;
  text-align: center;
  line-height: 20px;
  color: #1a48db;
  margin-right: 10px;
  cursor: pointer;
}
.examnumberset li:hover,
.examnumberset li.hover {
  background: #1a48db;
  color: #fff;
}
.examnumberset li.red {
  border: solid 1px #ec555a;
  color: #fff;
}
.examnumbercontent {
  padding: 15px 0;
}
.examnumbercontent b {
  display: block;
  padding: 0 20px;
  font-size: 14px;
  color: #5b6371;
  font-weight: normal;
}
.examnumbercontent:hover,
.examnumbercontent.hover {
  background: #e8f0fa;
}
.nameexamnum {
  display: flex;
  align-items: center;
  padding: 10px 20px 0;
}
.nameexamnum i {
  display: inline-block;
  width: 44px;
  height: 20px;
  background: #1a48db;
  border-radius: 2px;
  line-height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  font-style: normal;
  cursor: pointer;
}
.nameexamnum span {
  display: inline-block;
  width: 44px;
  height: 20px;
  background: #ec555a;
  border-radius: 2px;
  line-height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  font-style: normal;
  margin-left: 10px;
  cursor: pointer;
}
.nameexamnum em {
  display: inline-block;
  width: 44px;
  height: 20px;
  background: #1a48db;
  border-radius: 2px;
  line-height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  font-style: normal;
  cursor: pointer;
  margin-right: 10px;
}
.nameexamnumul {
  display: flex;
  align-items: center;
  padding: 0 0 0 20px;
  height: 20px;
}
.titlebnumber {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: #5b6371;
  padding: 0 0 0 20px;
  font-weight: normal;
}
.locationmark {
  padding-top: 15px;
  cursor: pointer;
}
.locationmark:hover,
.locationmark.hover {
  background: #e8f0fa;
}
.nameexamnumul li {
  width: 64px;
  height: 20px;
  border: 1px solid #1a48db;
  border-radius: 2px;
  font-size: 12px;
  color: #1a48db;
  line-height: 20px;
  text-align: center;
  margin-right: 10px;
}
.nameexamnumul li.hover,
.nameexamnumul li:hover {
  background: #1a48db;
  color: #fff;
}
.nameexamnumul li.red {
  border: solid 1px #ec555a;
  color: #fff;
}
/* >>> .el-collapse-item__header, >>> .el-collapse, >>> .el-collapse-item__wrap{
    border:none
  } */
.custom-title1 {
  width: 100%;
  border-bottom: solid 1px #5572921a;
  padding: 15px 0;
  cursor: pointer;
}
.custom-title1 span,
.custom-title span {
  font-size: 16px;
  color: #2a303b;
}
.custom-title1 span.hover,
.custom-title span.hover {
  color: #1a48db;
}
.custom-title1 span i,
.custom-title span i {
  font-style: normal;
  color: #ec555a;
}
.templatePage {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1001;
  display: flex;
  align-items: center;
}
.templatePage1 {
  position: fixed;
  right: 500px;
  bottom: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
}
.imgbox {
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #dee1e7;
  border-radius: 2px;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: #557292;
  margin-right: 14px;
  cursor: pointer;
}
.imgbox:hover,
.imgbox.hover {
  background: #1a48db;
  border-radius: 2px;
  color: #fff;
}
.xinzeplxtbutton {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 54px;
  background: #e8f0fa;
  display: flex;
  width: 100%;
  align-items: center;
}
.xinzeplxtbutton span {
  display: inline-block;
  width: 126px;
  height: 34px;
  background: #1a48db;
  border-radius: 4px;
  margin-left: 14px;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}
.xinzeplxtbutton span:last-child {
  border: 1px solid #1a48db;
  border-radius: 4px;
  color: #1a48db;
  background: none;
}
.kgtboxscorll {
  height: calc(100vh - 270px);
  overflow-y: auto;
}
.spacebettweenlist {
  padding-right: 20px;
}
.spacebettweenlist em {
  display: inline-block;
  width: 44px;
  height: 20px;
  background: #1a48db;
  border-radius: 2px;
  line-height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  font-style: normal;
  cursor: pointer;
}
.spacebettweenlist span {
  display: inline-block;
  width: 44px;
  height: 20px;
  background: #ec555a;
  border-radius: 2px;
  line-height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  font-style: normal;
  margin-left: 10px;
  cursor: pointer;
}
.spacebettweenlist b i {
  color: #ec555a;
  font-style: normal;
}
.spacebettweenlist b i.hover {
  color: #288f41;
}
.nameexamnum em.boxred {
  background: #ec555a;
}
</style>